<template>
  <div class="progress" v-if="percentage < 100">
    <img src="/cat2.gif" />
    <h3>加载中，马上就好</h3>
    <h4>
      横向分辨率为<span style="color: #ff0000">1400px</span>及以上将获得最佳体验
    </h4>
    <el-progress :stroke-width="24" :percentage="percentage" />
  </div>
  <div class="page" v-else>
    <header @click="BackToBeforePage">
      <h2>
        <i> <img src="/resume.svg" />简历封面 </i>
        <i>Before Pages</i>
      </h2>
      <i class="des">
        <i>Tech Otakus Change The World</i>
        <i>本简历项目由Vue3构建</i>
      </i>
    </header>
    <div class="content">
      <div class="introduction" title="个人简介">
        <h1>姓名:{{ resumeInfo.userInfo.name }}</h1>
        <p>
          性别:{{ resumeInfo.userInfo.gender }}&nbsp; &nbsp;年龄:{{ resumeInfo.userInfo.age }}&nbsp; &nbsp; {{ resumeInfo.userInfo.post }}，<span
            class="age"
            >{{ resumeInfo.userInfo.exp }}</span
          >开发经验
        </p>
        <p>
          <img src="@/assets/logos/school.svg" style="width: 18px" />
          <span class="phone">学历:{{ resumeInfo.userInfo.record }}，毕业时间:{{ resumeInfo.userInfo.graduation }}</span>
        </p>
        <span>
          <img src="@/assets/logos/phone.svg" style="width: 18px" />
          <span class="phone">手机号(微信):{{ resumeInfo.userInfo.phone }}</span>
        </span>
        <span>
          <img src="@/assets/logos/mail.svg" style="width: 18px" />
          <a class="link">邮箱:{{ resumeInfo.userInfo.mail }}</a>
        </span>
        <div title="码云地址" class="gitee">
          <img style="width: 18px" src="@/assets/logos/gitee.svg" />
          <a
            :href="resumeInfo.network.gitee"
            class="link"
            target="_blank"
          >
            <span>码云地址：</span>
            {{ resumeInfo.network.getee }}
          </a>
        </div>
        <div class="tags">
          <span class="tag" v-for="item in resumeInfo.skill" :key="item">{{ item }}</span>&nbsp;

        </div>
      </div>
      <div class="btnBox" v-if="timeOut" @click="goToHome">
        <div class="btn">让我们开始吧！</div>
        <h2 class="ToHome">前往主页</h2>
      </div>
    </div>
    <footer>
      <div class="copyright">
        <p>
          <span class="text">@Made</span> by
          <i class="mark" style="color: #fff">&nbsp; {{ resumeInfo.userInfo.ename }} &nbsp;</i>
        </p>
        <p>
          <span class="text">@Powered</span> with
          <img src="@/assets/logos/vue.svg" title="vue" class="tinyICon" />
          <img src="@/assets/logos/vite.svg" title="vite" class="tinyICon" />
          <img src="@/assets/logos/pinia.svg" title="pinia" class="tinyICon" />
          <img src="@/assets/logos/gitee.svg" title="gitee" class="tinyICon" />
          <img
            src="@/assets/logos/ts.png"
            title="TypeScript"
            class="longIcon"
          />
          <img
            src="@/assets/logos/elementPlus.svg"
            title="elementPlus"
            class="longIcon"
          />
          <img
            src="@/assets/logos/eChatrs.png"
            title="eChatrs"
            class="longIcon"
          />
        </p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import useStore from "@/store";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted, markRaw } from "vue";
import { DataAnalysis } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import resumeData from '@/assets/info.ts'
const router = useRouter();
const { methods } = useStore();

onMounted(() => {
  device();
});

const device = () => {
  // 获取设备类型
  let deviceType = ref(methods.getDeviceType());
  router.push(deviceType.value ? "/mobile" : "/");

  // 根据设备类型弹出消息提示框
  if (!deviceType.value) {
    ElMessage({
      dangerousGFHUseHTMLString: true,
      message:
        '检测到PC端设备，已为PC端优化；当前页面：封面页',
      type: "success",
      duration: 2500,
    });
  }
};
const resumeInfo = resumeData;
// 加载进度条
const percentage = ref(0);
setInterval(() => {
  percentage.value++;
}, 25);

// 打开消息弹窗
const open = () => {
  // ElMessageBox.confirm(
  //   `简历项目现已为移动端优化`,
  //   "公告栏",
  //   {
  //     showCancelButton: false,
  //     dangerousGFHUseHTMLString: true,

  //     icon: markRaw(DataAnalysis),
  //   }
  // );
};

// 弹出公告栏
setTimeout(() => {
  open();
  // 2.5s后关闭公告栏
  setTimeout(() => {
    ElMessageBox.close();
  }, 2500);
}, 5000);

let timeOut = ref(false);
setTimeout(() => {
  timeOut.value = true;
}, 6000);

const goToHome = () => {
  router.push("/home");
};
</script>

<style src="@/assets/css/home.css"></style>
<style lang="less" scoped>
.progress {
  width: 500px;
  text-align: center;
  margin: auto;
  margin-top: 300px;

  img {
    width: 150px;
    height: 150px;
  }

  h3 {
    color: #000;
  }
}

@keyframes animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.page {
  position: relative;
  width: 1200px;
  height: 520px;
  background-color: #f7f7f7;
  margin: auto;
  box-shadow: 0 0 6px #00000083;
  padding: 40px;
  margin-top: 50px;
  margin-bottom: 50px;
  animation: animation 1.5s linear alternate;

  header {
    cursor: pointer;
    margin-bottom: 30px;

    h2 {
      display: flex;
      justify-content: space-between;
      transition: all 0.3s;
      border-bottom: 3px solid #a0a0a0;
      margin: 0;

      img {
        position: relative;
        top: 4px;
        width: 25px;
        height: 25px;
      }
    }

    .BackToBeforePage {
      position: relative;
      right: 100px;
      color: #ff0000;
      opacity: 0;
      transition: all 0.3s;
    }

    &:hover {
      color: #000;

      h2 {
        border-bottom: 3px solid #000000;
      }

      .BackToBeforePage {
        right: -20px;
        opacity: 1;
      }
    }

    .des {
      display: flex;
      justify-content: space-between;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .introduction {
      transition: all 0.3s;
      color: #000;

      .age {
        padding-left: 4px;
        padding-right: 4px;
        background-color: #000;
        color: #fff;
        border-radius: 7px;
        margin-right: 3px;
      }

      .phone {
        position: relative;
        bottom: 2px;
        margin-left: 5px;
        margin-right: 30px;
      }

      .link {
        position: relative;
        bottom: 2px;
        color: #26c3be;
        margin-left: 5px;
        transition: all 0.3s;
        text-decoration: none;
        cursor: pointer;

        &:hover {
          color: #9900ff;
        }
      }

      .gitee {
        margin-top: 12px;

        a {
          bottom: 3px;

          span {
            color: #000;
          }
        }
      }

      .tags {
        margin-top: 10px;
        color: #f0e3e3;

        .tag {
          display: inline-block;
          height: 25px;
          line-height: 25px;
          font-size: 15px;
          text-align: center;
          border-radius: 20px;
          border: 2px solid #797979;
          padding-left: 5px;
          padding-right: 5px;
          background-color: #000;
          cursor: pointer;
          margin: 0 5px
        }
      }
    }

    .btnBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-top: 100px;
      margin-right: 300px;
      animation: animation 1.2s linear alternate;

      .btn {
        width: 135px;
        text-align: center;
        color: #fff;
        font-weight: 800;
        border-radius: 15px;
        background: linear-gradient(120deg, #43e97b, #4facfe);
        transition: all 0.3s;
        padding: 20px;
        cursor: pointer;

        &:hover {
          transform: scale(1.2);
          border: 2px solid #1eff00;
        }
      }

      .ToHome {
        color: #000;
      }
    }
  }

  footer {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .copyright {
      padding: 10px;
      margin-right: 150px;
      color: #000;

      img {
        margin-right: 30px;
        cursor: pointer;
      }

      .tinyICon {
        width: 30px;
      }

      .longIcon {
        width: 100px;
      }

      .text {
        font-size: 25px;
        font-style: italic;
        margin-right: 5px;
      }

      .mark {
        font-size: 20px;
        font-style: italic;
        background: linear-gradient(90deg, #43e97b, #4facfe);
        border-radius: 5px;
      }
    }
  }
}
</style>
